<template>
  <!-- 分页组件 -->
  <el-pagination
    :key="key"
    :append-to-body="false"
    class="pagination"
    popper-class="selectPagination"
    :current-page="pageable.pageNum"
    :page-sizes="pageSizesList"
    :page-size.sync="pageable.pageSize"
    :total="pageable.total"
    layout="total, prev, pager, next,sizes,jumper"
    :hide-on-single-page="false"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>

export default {
  props: {
    pageable: {
      type: Object,
      default: () => {}
    },
    handleSizeChange: {
      type: Function,
      default: () => {}
    },
    handleCurrentChange: {
      type: Function,
      default: () => {}
    },
    tabs: {
      type: String,
      default: '1'
    },
    showAllPages: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      key: 1,
      pageSizesList: [10, 25, 50, 100, 500, 1000]
    }
  },
  computed: {
    // ...mapState({
    //   isScreenfull(state){
    //     if(state.flow.tabsScreenfull){
    //       console.log('thsi',document.querySelector(".selectPagination"));
    //       this.key++
    //       this.$parent.$el.appendChild(document.querySelector(".selectPagination"))
    //       // screenfull.element.appendChild(document.querySelector(".selectPagination"))
    //     }
    //     return state.flow.tabsScreenfull
    //   }
    // })
  },
  watch: {
    pageable: {
      deep: true,
      immediate: true,
      handler() {
        const { total } = this.pageable
        // 全部条数如果大于分页器中的最后一个配置， 则显示全部条数的配置
        if (total > this.pageSizesList.at(-1)) {
          this.pageSizesList.push(total)
        }
      }
    }
    // tabs: {
    //   immediate: true,
    //   handler(){
    //     this.$nextTick(()=>{
    //       const jumpElement = document.getElementsByClassName("el-pagination__jump")[0]
    //       if(jumpElement){
    //         jumpElement.childNodes[0].nodeValue = '跳至';
    //       }
    //     })
    //   }
    // }
  },
  mounted() {
    // 这里的修改逻辑不完善有问题， 参考 https://blog.csdn.net/KOBE24forever/article/details/118568831
    // this.$nextTick(()=>{
    //   const jumpElement = document.getElementsByClassName("el-pagination__jump")[0]
    //   console.log('jumpElement',jumpElement);
    //   if(jumpElement){
    //     jumpElement.childNodes[0].nodeValue = '跳至';
    //   }
    // })
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
::v-deep .el-pagination__sizes{
  margin: 0;
}
::v-deep .el-pagination__jump{
  margin-left: 3px
}
::v-deep .el-pager{
  .active{
    background-color: #F0F6FF;
    border-radius: 4px
  }
}
</style>
